<div class="table-main">
  <div class="header">
    <div class="left" style="line-height: 3.3em">
      <div [routerLink]="['/main/table/table-list']"><i class="fa fa-angle-left" aria-hidden="true" style="font-size: 1.5em;"><span
        style="font-size: .8em;margin-left: 5px;">返回</span> </i></div>
    </div>
    <div class="center">预定记录</div>
    <div class="right" routerLink="/main/index">
      <span style="font-size: 1.2em;">首页</span>
    </div>
  </div>
  <app-table-nav [navName]="'reserve'"></app-table-nav>

  <div class="group-list" style="margin-top: 3.5em;">
    <div class="group-item">
      <div class="left" style="width: 6em;">
      <span style="margin-left: 5px;font-weight: 600">预订桌号</span>
      </div>
      <div class="right" style="text-align: right;font-weight: 600">
        A区 A023
      </div>
    </div>
  </div>

  <div class="group-list">
    <div class="group-item">
      <div class="left" style="width: 6em;"><span style="position: absolute"><i class="fa fa-user" aria-hidden="true"
                                                                                style="font-size: 1.5em;margin-top: 10px;"></i></span><span
        style="margin-left: 25px;">预约姓名</span></div>
      <div class="right" style="text-align: right">
        梁先生
      </div>
    </div>
    <div class="group-item">
      <div class="left" style="width: 6em;"><span style="position: absolute"><i class="fa fa-mobile" aria-hidden="true"
                                                                                style="font-size: 2em;margin-top: 8px"></i></span><span
        style="margin-left: 25px;">预约电话</span></div>
      <div class="right" style="text-align: right">13609302664</div>
    </div>
  </div>


  <div class="group-list">
    <div class="group-item">
      <div class="left" style="flex: 1">
        <span style="position: absolute"><i class="fa fa-calendar-plus-o" aria-hidden="true"
                                            style="font-size: 1.2em;margin-top: 12px;"></i></span>
        <span style="margin-left: 25px;">预约日期</span>
      </div>
      <div class="right" style="text-align: right">
        2018年2月15
      </div>
    </div>
    <div class="group-item">
      <div class="left" style="flex: 1">
        <span style="position: absolute"><i class="fa fa-clock-o" aria-hidden="true"
                                            style="font-size: 1.2em;margin-top: 12px;"></i></span>
        <span style="margin-left: 25px;">预约时间</span>
      </div>
      <div class="right" style="text-align: right">
        20:15:00
      </div>
    </div>
  </div>

  <div class="group-list">
    <div class="group-item">
      <div class="left" style="width: 6em;">
      <span style="position: absolute"><i class="fa fa-users" aria-hidden="true"
                                          style="font-size: 1.2em;margin-top: 12px;"></i></span><span
        style="margin-left: 25px;">用餐人数</span>
      </div>
      <div class="right" style="text-align: right">
        2人
      </div>
    </div>
  </div>
  <div class="group-list" style="height: 5em">
    <div class="group-item">
      希望有个漂亮的服务员为我们服务...
    </div>
  </div>

  <div style="text-align: center;padding-top: 20%;color: #666" *ngIf="!infoList.length">
    <p>
      <i class="fa fa-spinner fa-spin fa-3x fa-fw" ></i>
    </p>
    <p>
      数据正在加载中...
    </p>
  </div>
</div>
